<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta name="format-detection" content="telephone=no" />
    <meta name="format-detection" content="email=no" />
    <title>邀请好友</title>
    <link rel="stylesheet" href="../../css/api.css">
    <link rel="stylesheet" href="../../css/vant.css">
    <link rel="stylesheet" href="../../css/main.css">
    <style>
        html,
        body {
            background-color: #BD251F;
        }
    </style>
</head>

<body>
    <div class="app" v-cloak>
        <div class="invite-list">
            <div class="top">
                <div class="title">
                    <img class="title-img" src="https://zzzzkj.oss-cn-shanghai.aliyuncs.com/static/tiexie/app/image/image/mine/invite_list_title_bg.png" width="150" height="17"
                        alt="">
                    <div class="title-des">邀请数据统计</div>
                </div>

                <div class="total-title">累计收益(元)</div>
                <div class="total-content">{{inviteTotal.inviteAmount}}</div>

                <div class="count">
                    <div class="count-item">
                        <div class="count-des">{{inviteTotal.inviteCount}}</div>
                        <div class="title-des">累计邀请(人)</div>
                    </div>
                    <div class="divider"></div>
                    <div class="count-item">
                        <div class="count-des">{{inviteTotal.personalCount}}</div>
                        <div class="title-des">个人认证</div>
                    </div>
                    <div class="divider"></div>
                    <div class="count-item">
                        <div class="count-des">{{inviteTotal.enterpriseCount}}</div>
                        <div class="title-des">企业认证</div>
                    </div>
                </div>
            </div>

            <div class="divider">
                <img src="https://zzzzkj.oss-cn-shanghai.aliyuncs.com/static/tiexie/app/image/image/mine/invite_divider_left.png" height="33" alt="">
                <div class="line-content">
                    <div class="line"></div>
                </div>
                <img src="https://zzzzkj.oss-cn-shanghai.aliyuncs.com/static/tiexie/app/image/image/mine/invite_divider_right.png" height="33" alt="">
            </div>

            <div class="bottom">

                <div class="title">
                    <img class="title-img" src="https://zzzzkj.oss-cn-shanghai.aliyuncs.com/static/tiexie/app/image/image/mine/invite_list_title_bg.png" width="150" height="17"
                        alt="">
                    <div class="title-des">邀请记录</div>
                </div>

                <div class="invite-list-content">
                    <div class="item-title">
                        <span class="item time">时间</span>
                        <span class="item phone">手机号</span>
                        <span class="item status">认证</span>
                        <span class="item award">奖励</span>
                    </div>

                    <div class="des">
                        <div class="empty-data" v-if="inviteList.length==0">暂无数据</div>
                        <div v-else class="menu" v-for="(item,index) in inviteList" :key="index">
                            <span class="content time">{{item.registerDate|handleTime}}</span>
                            <span class="content phone">{{item.phone}}</span>
                            <span class="content status content-green">{{item.certificationType|filterStatus}}</span>
                            <span class="content award content-red">{{item.certificationReward}}</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </div>
    <script src="../../script/api.js"></script>
    <script src="../../script/flexible.js"></script>
    <script src="../../script/fastclick.js"></script>
    <script src="../../script/vue.min.js"></script>
    <script src="../../script/iconfont.js"></script>
    <script src="../../script/vant.min.js"></script>
    <script src="../../script/common.js"></script>
    <script src="../../script/restful.js"></script>
    <script src="../../script/businessCommon.js"></script>

    <script>
        apiready = function () {
            vm = new Vue({
                el: '.app',
                data: {
                    inviteList: [],
                    queryPagram: {
                        byPromoCode: ''
                    },
                    inviteTotal: {}
                },
                mounted() {
                    this.getInviteCode()
                    this.getInviteTotal()
                },
                filters: {
                    handleTime(timestamp) {
                        if (!timestamp) {
                            return ''
                        }
                        var date = new Date(timestamp);
                        Y = date.getFullYear();
                        M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1);
                        D = (date.getDate() < 10 ? '0' + (date.getDate()) : date.getDate())
                        return Y + '-' + M + '-' + D + ' '
                    },
                    // certificationType 认证类型，null  未认证 ， 1 个人认证 ， 2 企业认证 
                    filterStatus(certificationType) {
                        switch (certificationType) {
                            case 0:
                                return "个人认证"
                            case 1:
                                return "企业认证"
                            default:
                                return "手机认证"
                        }
                    }
                },
                methods: {
                    //获取我的邀请码
                    getInviteCode() {
                        let vm = this
                        mime("getInviteCode")(function (ret) {
                            vm.inviteCode = ret.data
                            vm.queryPagram.byPromoCode = vm.inviteCode
                            vm.getInviteList()
                        })
                    },

                    //获取邀请列表
                    getInviteList() {
                        let vm = this
                        mime("getInviteList")(vm.queryPagram, function (ret) {
                            vm.inviteList = ret.data
                            console.log(JSON.stringify(ret))
                        })
                    },

                    //获取邀请统计
                    getInviteTotal() {
                        let vm = this
                        mime("getInviteTotal")(function (ret) {
                            vm.inviteTotal = ret.data
                            // vm.queryPagram.byPromoCode = vm.inviteCode
                            // vm.getInviteList()
                        })
                    },

                },
            });
        }
    </script>
</body>

</html>